<template>
    <div @click="goDetail" class="content">
        <img v-if="img" v-lazy="img" />
        <p>{{ inst.title }}</p>
        <div class="tag">
            <span v-for="(item, idx) in inst.tags">{{ item.title }}</span>
        </div>
    </div>
</template>

<script setup>
import router from "@/router/index.ts";
import { onMounted, ref } from "vue";
import isMobile from "../util/isMobile.js";

const props = defineProps({
    inst: {
        required: true,
    },
});

onMounted(() => {
    if (!isMobile()) {
        img.value = "https://t.alcy.cc/fj?id=" + props.inst.id;
    }
});

const img = ref("");

const goDetail = () => {
    router.push({ name: "article-detail", query: { id: props.inst.id } });
};

const formatTime = (v) => {
    return v.replace("T", " ").substring(0, 19);
};
</script>

<style scoped>
.content {
    margin: 11px;
    padding: 11px;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 0 3px #aaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.content > img {
    width: 100%;
    height: 170px;
    display: block;
    margin-bottom: 10px;
}

.content > p {
    margin: 10px 0;
}

.tag > span {
    padding: 2px 8px;
    background-color: #eee;
    border-radius: 3px;
    font-size: 14px;
    color: #797979;
    transition: all 0.3s;
    cursor: pointer;
    user-select: none;
    margin-right: 5px;
}

.tag > span:hover {
    color: #fff;
    background-color: orange;
}
</style>
